<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索员工:">
                <a-input
                  v-model="keywords"
                  placeholder="员工姓名/手机号(回车搜索)"
                  @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%"
                >
                  <a-tooltip slot="suffix" title="请输入老师姓名">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="btn-list">
        <a-button class="mr10" @click="openDaoKe"> 到课人次计算规则 </a-button>
        <!-- <a-button class="mr10">绩效工资统计规则</a-button> -->
      </div>
      <div>
        <!-- <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          showPagination="auto"
          class="user_management_table"
          :pagination="pagination"
        >
          <span slot="is_enable" slot-scope="text, record">
            {{ record.is_enable == 1 ? '授课' : '不授课' }}
          </span>
          <span slot="achievement" slot-scope="text, record">
            <span v-if="record.is_enable == 1">
              <span v-if="record.achievement">已设置</span>
              <span v-else style="color: red">未设置</span>
            </span>
            <span v-else>-</span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="goSet(record.id)">去设置</a>
          </span>
        </s-table> -->
        <s-table
          ref="table"
          :data="loadData"
          showPagination="auto"
          class="user_management_table"
          :pagination="pagination"
        >
          <a-table-column title="员工姓名" data-index="name" width="200" />
          <a-table-column title="手机号" data-index="phone" width="200" />
          <a-table-column title="是否授课" width="200">
            <template slot-scope="record"> {{ record.is_enable == 1 ? '授课' : '不授课' }}</template>
          </a-table-column>
          <a-table-column title="基本工资" data-index="base_pay" width="200" />
          <a-table-column title="奖金" data-index="bonus" width="200" />
          <a-table-column title="上课绩效工资" width="200">
            <template slot-scope="record">
              <span v-if="record.is_enable == 1">
                <span v-if="record.achievement">已设置</span>
                <span v-else style="color: red">未设置</span>
              </span>
              <span v-else>-</span></template
            >
          </a-table-column>
          <a-table-column :title="item.title" width="200" v-for="(item,index) in arr" :key="index+100">
            <template slot-scope="record">
              {{record[item.title].value}}
            </template>
          </a-table-column>
          <a-table-column title="操作" width="200">
            <template slot-scope="record"> <a @click="goSet(record.id,record.teacher_id,record.is_enable)">去设置</a></template>
          </a-table-column>
        </s-table>
      </div>
    </a-card>
    <!-- 到课人次计算规则 -->
    <a-modal title="到课人次计算规则" :visible="dkVisible" @cancel="dkVisible = false" :footer="null">
      <div class="list-box" style="border-bottom: 1px solid #e8e8e8;padd">
        <div class="item-box">
          <div class="top-text">补课计入到课人次</div>
          <div class="bottom-text">开启后，工资结算时补课人次计入老师绩效</div>
        </div>
        <div class="item-action">
          <a-switch v-model="rlueStatus.remedial_teaching" />
        </div>
      </div>
      <div class="list-box">
        <div class="item-box">
          <div class="top-text">试听计入到课人次</div>
          <div class="bottom-text">开启后，工资结算时试听人次计入老师绩效</div>
        </div>
        <div class="item-action">
          <a-switch v-model="rlueStatus.audition" />
        </div>
      </div>
    </a-modal>
    <!-- 绩效工资统计规则 暂时没有-->
    <!-- <a-modal title="到课人次计算规则" :visible="JXVisible" @cancel="JXVisible = false" @ok="handleOk"> -->
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { salariesList, comingClassGetSetting, comingClassSetting, payslipItems } from '@/api/wageSettlement'
import topNavBar from '@/components/topNavBar/topNavBar'
export default {
  components: { STable, topNavBar },
  data() {
    return {
      nowRouteTitle: '',
      keywords: '',
      queryParam: {
        school_id: this.$store.state.user.school,
      },
      columns: [
        {
          title: '员工姓名',
          dataIndex: 'name',
          width: 200,
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 200,
        },
        {
          title: '是否授课',
          scopedSlots: { customRender: 'is_enable' },
          width: 100,
        },
        {
          title: '基本工资',
          dataIndex: 'base_pay',
          width: 200,
        },
        {
          title: '奖金',
          dataIndex: 'bonus',
          width: 200,
        },
        {
          title: '上课绩效工资',
          scopedSlots: { customRender: 'achievement' },
          width: 200,
        },
        // {
        //   title: '操作',
        //   scopedSlots: { customRender: 'action' },
        //   width: 200,
        // },
      ],

      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return salariesList(Object.assign(parameter, this.queryParam, { keywords: this.keywords })).then((res) => {
          // this.pageNo = Number(parameter.pageNo)
          res.data.forEach((item) => {
            if (item.other) {
              item.other.forEach((e) => {
                item[e.payslip_item.name] = {
                  value: e.value,
                }
              })
            }else{
              
            }
          })
          return res
        })
      },
      school_id: this.$store.state.user.school,
      dkVisible: false,
      rlueStatus: {
        remedial_teaching: false,
        audition: false,
      },
      JXVisible: false,
      arr: [],
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    // console.log(this.loadData)
    payslipItems({ school_id: this.queryParam.school_id }).then((res) => {
      this.arr = res.data.map((e) => {
        return {
          title: e.name,
        }
      })
      this.columns.push(...this.arr, {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width: 200,
      })
    })
  },
  watch: {
    queryParam: {
      handler() {
        this.$refs.table.refresh(true)
      },
      deep: true, // 开启深度监听，默认是false
    },
    rlueStatus: {
      handler() {
        this.getSet()
      },
      deep: true, // 开启深度监听，默认是false
    },
  },
  methods: {
    getSet() {
      comingClassSetting({ school_id: this.school_id, key: 'coming_class_num', value: this.rlueStatus })
        .then((res) => {
          //  this.rlueStatus = res.value
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    openDaoKe() {
      comingClassGetSetting({ school_id: this.school_id, key: 'coming_class_num' })
        .then((res) => {
          //   rlueStatus:{
          //   daoke:false,
          //   shiting:false
          // }
          if (res.value.remedial_teaching) {
            this.rlueStatus = res.value
          }
          this.dkVisible = true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    goSet(id,teacher_id,is_enable) {
      this.$router.push({
        name: 'set_wage_info',
        query: {
          id,
          teacher_id,
          is_enable
        },
      })
    },
    back() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less" scoped>
.btn-list {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.mr10 {
  margin-right: 10px;
}
.list-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  .item-box {
    .top-text {
      margin-bottom: 4px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      line-height: 22px;
    }
    .bottom-text {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
    }
  }
}
</style>